<template>
    <el-dialog :title="tableTitle" v-model="props.dialogVisible" width="60%" top="15vh" center @open="tableOpen"
        :before-close="cancelClick">
        <div class="bodyBox">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize" status-icon>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="用户ID" prop="name">
                            <el-input v-model="ruleForm.name" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="Activity zone" prop="region">
                            <el-select v-model="ruleForm.region" placeholder="Activity zone">
                                <el-option label="Zone one" value="shanghai" />
                                <el-option label="Zone two" value="beijing" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="Activity count" prop="count">
                            <el-select-v2 v-model="ruleForm.count" placeholder="Activity count" :options="options" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="Instant delivery" prop="delivery">
                            <el-switch v-model="ruleForm.delivery" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="Activity form" prop="desc">
                            <el-input v-model="ruleForm.desc" type="textarea" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelClick">取 消</el-button>
            <el-button type="primary" @click="submitForm()">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script setup lang='ts'>
import { ref, reactive, defineProps } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false,
    },
    tableTitle: {
        type: String,
        default: '',
    },
})

interface RuleForm {
    name: string
    region: string
    count: string
    date1: string
    date2: string
    delivery: boolean
    resource: string
    desc: string
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: 'Hello',
    region: '',
    count: '',
    date1: '',
    date2: '',
    delivery: false,
    resource: '',
    desc: '',
})

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
    ],
    region: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        },
    ],
    count: [
        {
            required: true,
            message: 'Please select Activity count',
            trigger: 'change',
        },
    ],
    date1: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a date',
            trigger: 'change',
        },
    ],
    date2: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a time',
            trigger: 'change',
        },
    ],
    resource: [
        {
            required: true,
            message: 'Please select activity resource',
            trigger: 'change',
        },
    ],
    desc: [
        { required: true, message: 'Please input activity form', trigger: 'blur' },
    ],
})
// 确定按钮
const submitForm = () => {
    ruleFormRef.value?.validate().then((valid) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!!')
            return false
        }
    })
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))

const emits = defineEmits(['beforeClose']);
// 弹窗打开事件
const tableOpen = () => {
    console.log('tableOpen');
}
// 弹窗关闭事件
const cancelClick = () => {
    // 清空表单
    ruleFormRef.value?.resetFields();
    emits('beforeClose', false);
}
</script>
<style lang='scss' scoped>
.bodyBox {
    padding: 20px;
}

.dialog-footer {
    text-align: right;
}
</style>